<script setup>
  import axios from 'axios'
  import { reactive, ref } from 'vue'
  const currency = reactive({
    usd: '...загрузка',
    eur: '...загрузка',
  })
  axios
    .get(
      'https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/usd.json',
    )
    .then((response) => {
      currency.usd = response.data.usd.rub
    })
  axios
    .get(
      'https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/eur.json',
    )
    .then((response) => {
      currency.eur = response.data.eur.rub
    })
</script>

<template>
  <div class="relative h-full w-full p-3 text-2xl font-bold">
    <div class="flex h-1/2 items-center justify-center">
      <span>1$=</span>
      <p>{{ Math.round(currency.usd) }}</p>
      <span>₽</span>
    </div>
    <div class="flex h-1/2 items-start justify-center">
      <span>1€=</span>
      <p>{{ Math.round(currency.eur) }}</p>
      <span>₽</span>
    </div>
  </div>
</template>
